<template>
  <div class="container">
    <!-- 18.2 画图板 -->
    <div ref="myechart" id="mybar" style="width:880px;height:420px;"></div>
    <div id="consumption" style="width:280px;height:;420px">
      <p class="memberConsumption">今日会员消费占比</p>
      <p class="theTotalConsumption">今日消费总额</p>
      <p class="price">￥4200.00</p>
      <p class="theProportion1"><img src="./img/zx.png">&emsp;会员消费占比40.7%</p>
      <p class="theProportion2"><img src="./img/zx2.png">&emsp;非会员消费占比59.3%</p>
    </div>
  </div>
</template>
<script>
// 18.1引入
import * as echarts from "echarts"; //as后面是别名

export default {
  // 18.3 挂在后发送请求
  mounted() {
    var arr = [];
    for (let index = 1; index <= 30; index++) {
      arr.push(String(index));
    }
    var sevenday = Array(100)
      .fill(0)
      .map(item => (item = Math.round(2000 + Math.random() * 4000)));
    var thirtyday = Array(100)
      .fill(0)
      .map(item => (item = Math.round(2000 + Math.random() * 4000)));
    var year = Array(100)
      .fill(0)
      .map(item => (item = Math.round(2000 + Math.random() * 4000)));
    var myChart = echarts.init(document.getElementById("mybar"));
    myChart.setOption({
      color: ["#ddade8", "#fad7c8", "#9fbfde"],
      title: {
        text: "诊所收入趋势"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          show: true,
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }
      },
      legend: {
        data: ["近7天", "近30天", "近一年月均"],
        icon: "circle",
        right: "50"
      },
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        containLabel: true
      },
      xAxis: [
        {
          show: false,
          type: "category",
          boundaryGap: false,
          data: arr
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: [
        {
          name: "近7天",
          type: "line",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {},
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#ddade8"
              },
              {
                offset: 1,
                color: "#ddade8"
              }
            ])
          },
          emphasis: {
            focus: "series",
            blurScope: "coordinateSystem"
          },
          data: sevenday
        },
        {
          name: "近30天",
          type: "line",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#fad7c8"
              },
              {
                offset: 1,
                color: "#fad7c8"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: thirtyday
        },
        {
          name: "近一年月均",
          type: "line",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#9cbfde"
              },
              {
                offset: 1,
                color: "#9cbfde"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: year
        }
      ]
    });
  },

  data() {
    return {};
  },

  created() {}
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 28px;
 
}
#mybar {
  background-color: #ffffff;
  border-radius: 9px;
}
#consumption {
  background: url(./img/pay.png) no-repeat center;
  background-color: #ffffff;
  border-radius: 9px;
}
.memberConsumption {
  color: #9f9f9f;
  font-size: 17px;
  margin-left: 30px;
  margin-top: 20px;
}
.theTotalConsumption {
  font-size: 12px;
  margin-top: 115px;
  margin-left: 105px;
  color: white;
}
.price {
  font-size: 25px;
  width: 98px;
  height: 20px;
  color: white;
  margin-top: 35px;
  margin-left: 81px;
}
.theProportion1 {
  line-height: 100%;
  font-size: 14px;
  color: #898989;
  margin-top: 120px;
  margin-left: 65px;
}
.theProportion2 {
  line-height: 100%;
  font-size: 14px;
  color: #898989;
  margin-top: 12px;
  margin-left: 65px;
}
</style>
